import React, { ReactNode, useState } from 'react';

import { Dendrogram } from '@ant-design/graphs';
import { useMount } from 'ahooks';

import { findByTreeList } from '@/services/users';
import { NodeData } from '@antv/g6';
import { useParams } from 'react-router';

const DemoOrganizationGraph: React.FC = () => {
  const params = useParams();
  const [dataArray, setDataArray] = useState<ReactNode>();
  useMount(() => {
    console.log('paramsparamsparams', params);
    findByTreeList(params?.userId).then((res) => {
      console.log(res);
      //  console.log ( data1 );
      // console.log ( res.data );
      getDataReact(res);
    });
  });
  const getDataReact = (data: NodeData) => {
    console.log(data);
    return (
      <Dendrogram
        {...{
          autoFit: 'view',
          data,
        }}
        data={data}
        style={{ height: '100vh' }}
        edgeCfg={{
          type: 'polyline',
          style: {
            stroke: '#000',
            endArrow: false,
          },
        }}
        markerCfg={(cfg: {
          value: { level: any; direction: any };
          children: string | any[];
        }) => {
          // @ts-ignore
          const { level, direction } = cfg.value;
          // @ts-ignore
          const show = level !== 1 && cfg.children && cfg.children.length > 0;
          return {
            position: direction,
            show,
          };
        }}
        nodeCfg={{
          autoWidth: true,
          padding: 10,
          autoFit: true,
          fitCenter: true,
          animate: true,
          radius: 5,
          style: (node: { id: string }) => {
            return node?.id === 'joel'
              ? {
                  fill: '#1890ff',
                  stroke: '#91d5ff',
                  radius: 5,
                }
              : {
                  fill: '#1890ff',
                  stroke: '#91d5ff',
                  radius: 5,
                };
          },
          label: {
            style: (node: any, group: any, type: string | number) => {
              console.log('NNNNNNNNNNNNNNNNNNN', type);
              const styles = {
                icon: {
                  width: 32,
                  height: 32,
                  radius: 10,
                },
                title: {
                  fill: '#fff',
                },
                name: {
                  fill: '#fff',
                  textAnchor: 'center',
                },
              };
              // @ts-ignore
              return styles[type];
            },
          },
        }}
      />
    );
  };
  return <>{dataArray}</>;
};

export default DemoOrganizationGraph;
